<template>
	<view>
		<view class="rec">
			<view class="left">
				<view class="shu"></view>
				<view class="rec-left-text">推荐</view>
			</view>
			<view class="right">查看更多>></view>
		</view>
		
		<view class="rec-box">
			<view class="tx">
				<image src="../../static/img/333.jpg"></image>
				<text>付立虎</text>
			</view>
			<view class="rec-box-text">
				远渡重洋的学生，以为把人生都看尽，生命是,远渡重洋的学生，以为把人生都看尽，生命是
			</view>
			<view class="pics">
				<image src="../../static/img/333.jpg"></image>
				<image src="../../static/img/333.jpg"></image>
				<image src="../../static/img/333.jpg"></image>
			</view>
			<view class="rec-box-bottom">
				<view class="rec-box-bottom-left">
					<text>1200人已看</text>
				</view>
				<view class="icon-box">
					<uni-icons class="rec-icon" type="chat" size="13"></uni-icons>
					<text>5498</text>
				</view>
				<view :class="['icon-box',like?'active':'']" >
					<uni-icons @click="handThumbsup" class="rec-icon" :color="like?'$uni-bg-color-pink':''" type="hand-thumbsup" size="14"></uni-icons>
					<text>{{likeNum}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				likeNum:5498,
				like:false
			}
		},
		methods: {
			handThumbsup(){
				this.like=this.like?false:true
				console.log(this.like)
				this.likeNum=this.like?this.likeNum+1:this.likeNum-1
				console.log(this.likeNum)
			}
		}
	}
</script>

<style lang="scss">
.rec{
	display: flex;
	justify-content: space-between;
	margin: 10px 0;
	// width: 100%;
	height: 60rpx;
	// border: 1px solid red;
	line-height: 60rpx;
	.left{
		display: flex;
		.shu{
			width: 6rpx;
			height: 30rpx;
			margin: 15rpx;
			background-color: $uni-bg-color-pink;
		}
		.rec-left-text{
			color: #333333;
			font-size: 15px;
			font-weight: 600;
		}
	}
	.right{
		font-size: 10px;
		color: #333333;
		// align-self: flex-end;
	}
}

.rec-box{
	background-color: $uni-bg-color;
	width: 100%;
	// height: 488rpx;
	margin-bottom: 60rpx;
	border-radius: $uni-border-radius-xlg;
	// border: 1px solid red;
	.tx{
		display: flex;
		height: 60rpx;
		padding: 20rpx 16rpx;
		image{
			width: 60rpx;
			height: 60rpx;
			border-radius: $uni-border-radius-circle;
		}
		text{
			margin-left: 20rpx;
			line-height: 60rpx;
		}
	}
	.rec-box-text{
		font-size: 12px;
		color: #333333;
		line-height: 20px;
		padding: 0rpx 16rpx;
	}
	.pics{
		margin-top: 30rpx;
		padding: 0 16rpx;
		display: flex;
		justify-content: space-between;
		image{
			width: 206rpx;
			height: 206rpx;
			border-radius: $uni-border-radius-10;
		}
	}
	
	.rec-box-bottom{
		display: flex;
		justify-content: space-between;
		padding: 16rpx;
		height: 30rpx;
		text{
			font-size: 10px;
			color: #666666;
			line-height: 30rpx;
		}
		.rec-icon{
			margin-left: 30px;
			margin-right: 8rpx;
			// border: 1px solid;
		}
		view{
			display: flex;
		}
		.rec-box-bottom-left{
			flex: 30;
		}
		.icon-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			// border: 1px solid red;
		}
		.active{
			text{
				color: $uni-bg-color-pink;
			}
		}
	}
}
</style>
